/**
 * Copyright (c) 快宝网络 kuaidihelp.com Co., Ltd. All Rights Reserved 禁止外泄以及用于其它的商业用途
 */

/**
 * 下属驿站投诉页面
 *  */
import React, { Component } from "react";
import { Form, Button, Input, Row, Col, DatePicker, Modal } from "antd";
import { connect } from "dva";
import StandardTable from "@/components/StandardTable";
import moment from "moment/moment";
import { debounce } from "lodash";
import { Yzs } from "@/components/Select";
import styles from "./style.less";

const FormItem = Form.Item;
const { RangePicker } = DatePicker;

@connect(({ loading, report, complain }) => ({
  report,
  complain,
  stationing: loading.effects["area/subList"],
  loading: loading.effects["complain/getList"],
}))
@Form.create()
export default class Complaint extends Component {
  handleSearch = debounce(
    () => {
      this.getList();
    },
    500,
    {
      leading: true,
      trailing: false,
    }
  );

  handleTableChange = debounce(
    pagination => {
      const { current } = pagination;
      this.setState(
        {
          page: current,
        },
        () => {
          this.getList({ page: current });
        }
      );
    },
    500,
    {
      leading: true,
      trailing: false,
    }
  );

  constructor(props) {
    super(props);
    this.state = {
      cm_id: "all",
      page: 1,
      visible: false,
      content: "",
      start_date: moment()
        .startOf("day")
        .subtract(6, "days"),
      end_date: moment()
        .endOf("day")
        .subtract(0, "days"),
    };
    this.columns = [
      {
        title: "客户电话",
        key: "express_phone",
        dataIndex: "express_phone",
      },
      {
        title: "驿站名称",
        key: "cm_id",
        dataIndex: "inn_name",
      },
      {
        title: "单号",
        key: "waybill_no",
        dataIndex: "waybill_no",
      },
      {
        title: "品牌",
        key: "brand",
        dataIndex: "brand",
      },
      {
        title: "时间",
        key: "create_at",
        dataIndex: "create_at",
      },
      {
        title: "投诉类型",
        key: "complaint_type",
        dataIndex: "complaint_type_desc",
        render: (text, record) => {
          const { complaint_desc } = record;
          return complaint_desc ? (
            <a
              onClick={() =>
                this.handleModalVisible({
                  visible: true,
                  content: complaint_desc,
                  title: "投诉详情",
                })
              }
            >
              {text}
            </a>
          ) : (
            text
          );
        },
      },
      {
        title: "驿站处理结果",
        key: "is_deal",
        dataIndex: "is_deal_desc",
        render: (text, record) => {
          return record.is_deal == 1 ? (
            <a
              onClick={() =>
                this.handleModalVisible({
                  visible: true,
                  content: record.deal_desc,
                  title: "驿站处理详情",
                })
              }
            >
              {text}
            </a>
          ) : (
            text
          );
        },
      },
    ];
  }

  componentDidMount() {
    this.getList();
  }

  getList = (params = {}) => {
    const { dispatch } = this.props;
    this.getFormVlaus(res => {
      dispatch({
        type: "complain/getList",
        payload: {
          ...res,
          ...params,
        },
      });
    });
  };

  getFormVlaus = then => {
    const {
      form: { validateFields },
    } = this.props;
    const { page } = this.state;
    validateFields((err, fieldsValue) => {
      if (err) return;
      const values = {
        page,
        ...fieldsValue,
      };
      const { date } = fieldsValue;
      if (date) {
        values.date = date.map(d => moment(d).format("YYYY-MM-DD"));
        const [start, end] = values.date;
        values.start_date = start;
        values.end_date = end;
        delete values.date;
      } else {
        values.start_date = "";
        values.end_date = "";
      }
      this.setState({
        fromValues: values,
      });
      then(values);
    });
  };

  disabledDate = current => {
    return (
      current &&
      current >
        moment()
          .endOf("day")
          .subtract(0, "days")
    );
  };

  handleModalVisible = ({ visible, content, title }) => {
    this.setState({ visible, content, title });
  };

  handleCancel = () => {
    this.handleModalVisible({ visible: false });
  };

  render() {
    const {
      form: { getFieldDecorator },
      loading,
      complain: { list },
    } = this.props;
    const { cm_id, visible, content, title, start_date, end_date } = this.state;
    return (
      <>
        <Form layout="inline" style={{ marginBottom: 24 }}>
          <FormItem>
            {getFieldDecorator("keywords", {
              initialValue: "",
            })(<Input allowClear style={{ width: 300 }} placeholder="输入单号/手机号/尾号搜索" />)}
          </FormItem>
          <FormItem>
            {getFieldDecorator("date", {
              initialValue: [moment(start_date), moment(end_date)],
            })(
              <RangePicker
                style={{ width: "280px" }}
                placeholder={["开始日期", "结束日期"]}
                disabledDate={this.disabledDate}
              />
            )}
          </FormItem>
          <FormItem className={styles.data}>
            {getFieldDecorator("cm_id", {
              initialValue: cm_id,
            })(<Yzs allowClear />)}
          </FormItem>
          <FormItem>
            <Button type="primary" loading={loading} onClick={this.handleSearch}>
              查询
            </Button>
          </FormItem>
        </Form>
        <StandardTable
          rowKey="id"
          data={list}
          columns={this.columns}
          onChange={this.handleTableChange}
        />
        <Modal visible={visible} onCancel={this.handleCancel} title={title} footer={null}>
          <Row>
            <Col>
              <h3>{content}</h3>
            </Col>
          </Row>
        </Modal>
      </>
    );
  }
}
